<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <ul id="box">
    <li></li>
  </ul>
  <button id="huifu">恢复页面</button>
  <script>
    // 原对象
    var obj = {
      arr: ['红烧肉', '火锅', '烧烤', '烤羊腿', '锅包肉']
    }
    var pobj = new Proxy(obj, {
      get(target, key) {
        return target[key]
      },
      set(target, key, value) {
        return false
      }
    })
    loadList(pobj.arr)
    function loadList(arr) {
      var str = ''
      for (var i = 0; i < arr.length; i++) {
        str += `<li>${arr[i]}</li>
          <button onclick="del('${i}')">删除</button>`
      }
      var box = document.getElementById("box");
      box.innerHTML = str;
    }
    function del(index) {
      // pobj.arr.splice(index, 1);

      console.log(obj.arr)
      loadList(pobj.arr.reverse())
    }
    // 恢复页面
    var huifu = document.getElementById("huifu")
    huifu.onclick = function () {
      loadList(obj.arr)
    }


  </script>
</body>

</html>